<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法4：v-model双向绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">

        <h1>课堂小练习</h1>
        用户名：<input type="text" v-model="single"><br>

        密码：<input type="password" v-model="password"><br>

        确认密码：<input type="password" v-model="pass" @blur="check()"><br>

        性别：<input type="radio" value="F" v-model="radioValue">男
        <input type="radio" value="M" v-model="radioValue">女<br>

        籍贯：<select name="id" v-model="singleSelect">
        <option value="杭州">杭州</option>
        <option value="台州">台州</option>
        <option value="温州">温州</option>
        <option value="湖州">湖州</option>
        </select><br>

        选择的课外课程：<input type="checkbox" value="吉他" v-model="checkedValues">吉他
        <input type="checkbox" value="国画" v-model="checkedValues">国画
        <input type="checkbox" value="街舞" v-model="checkedValues">街舞
        <input type="checkbox" value="书法" v-model="checkedValues">书法<br>
        

        <input type="submit" value="提交" @click="submitForm">
    </div>
</body>
</html>

<script>
    const connApp = Vue.createApp({
        data() {
            return {
                singleText: '我是初始值',
                multiText: '',
                radioValue: '',
                toggleValue: false,
                checkedValues: [],
                singleSelect: '',
                multiSelect: [],
                single: '',
                password: '',
                pass: ''
            }
        },
        methods: {
            submitForm() {
                
                const genderText = this.radioValue === 'F' ? '男神' : (this.radioValue === 'M' ? '女神' : '');
                const courseText = this.checkedValues.join('、');
                alert(`尊敬的${this.single}用户，你是一位${genderText}，你选择的课程是：${courseText}`);
            },
            check(){
               if (this.password !== this.pass) {
                    alert('密码错误');
                    this.pass=''
                    return;
                }
            }
        }
    }).mount("#app")
</script>